@import '@/styles/variable.scss';
.leaderBoard-page{
  $itemW: 31%;
  background-color: $homeBgc;
  min-height: 100%;
  
  .content {
    padding-top: .5rem;
    
    .songlist {
      background-color: #fff;
      border-radius: .1rem;
      padding-bottom: .15rem;
      &.normal {
        margin-top: .1rem;
        margin-bottom: .1rem;
        &.recommend {
          margin: .08rem .15rem .1rem;
        }
      }
      .title {
        font-size: .18rem;
        font-weight: bold;
        padding: .25rem .15rem .15rem;
      }
      .list-box {
        padding: 0 .15rem;
        display: flex;
        flex-wrap: wrap;

        .list-item {
          width: $itemW;

          &:nth-child(3n+1), &:nth-child(3n+2) {
            margin-right: calc((100% - (#{$itemW} * 3)) / 2);
          }
          &:nth-child(n+4) {
            margin-top: .12rem;
          }
        }
      }
    }

    .official {
      padding-bottom: .15rem;
      border-bottom-left-radius: .1rem;
      border-bottom-right-radius: .1rem;
      background: linear-gradient(to bottom, transparent, #fff);
      .title {
        font-size: .18rem;
        font-weight: bold;
        padding: .15rem .15rem .1rem;
      }

      .official-item {
        padding: .15rem .12rem .15rem .15rem;
        background-color: #ebe0f6;
        margin: .1rem .15rem;
        border-radius: .1rem;
        position: relative;
        display: flex;
        .left {
          flex-basis: .9rem;
          .list-name {
            font-size: .2rem;
            font-weight: bold;
            color: #902aff;
          }
          img {
            width: 70%;
            aspect-ratio: 1;
            border-radius: .1rem;
            margin-top: .16rem;
          }
        }
        .right {
          flex: 1;
          overflow: hidden;
          padding-top: .15rem;
          .song {
            color: #92878b;
            padding: .08rem 0;
            span {
              font-size: .13rem;
              padding: 0 .03rem;
              color: black;
            }
            .split, .author {
              color: #92878b;
            }
          }
        }
        .frequency {
          position: absolute;
          right: .08rem;
          top: .08rem;
          font-size: .1rem;
          color: #c2b7b2;
        }
      }
      
      .official-item:nth-child(1) {
        background-color: #f4e1e8;
        .left {
          .list-name {
            color: #e82e77;
          }
        }
      }
      .official-item:nth-child(2) {
        background-color: #e0ebea;
        .left {
          .list-name {
            color: #26978b;
          }
        }
      }
      .official-item:nth-child(3) {
        background-color: #f3e0e0;
        .left {
          .list-name {
            color: #e32424;
          }
        }
      }
      .official-item:nth-child(4) {
        background-color: #f4e9e1;
        .left {
          .list-name {
            color: #e98135;
          }
        }
      }
      .official-item:nth-child(5) {
        background-color: #e2e7f0;
        .left {
          .list-name {
            color: #386fc0;
          }
        }
      }
      .official-item:nth-child(6) {
        background-color: #f3e5df;
        .left {
          .list-name {
            color: #e65a1f;
          }
        }
      }
    }
  }
}